{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/draw.css">
<body>
<div class="build-navbar"
     data-title="我要提现"
     data-transparent
     data-color="#fff"
     data-lcolor="#fff"
     data-right="提现记录,{:url('draw/record')}"
     data-rcolor="#fff"
></div>
<div class="main">
    <img src="/static/index/images/bg/bg_wytixtop@2x.png" alt="" class="img-top"/>
    <form class="layui-form" action="{:url('draw/save')}" lay-filter="lay-form">
        <div class="account-container flex justify-between p-30">
            {foreach name="account" item="vo" }
            <div class="account-item flex flex-col items-center">
                <div class="text">可提现{$vo.title}</div>
                <div class="balance front {$vo.type}-balance">{$vo.balance}</div>
            </div>
            {/foreach}
        </div>
        <div class="middle mx-30 p-30">
            <div class="title">提现金额</div>
            <div class="money-container flex justify-between items-center py-30">
                <label class="front flex items-center justify-center flex-1">
                    <input placeholder="请填写提现金额" class="inp money" name="money" lay-verify="req"/>
                </label>
                <span class="all" lay-click="all">全部提现</span>
            </div>
            <div class="type flex items-center justify-between ">
                <div class="left">提现账户</div>
                <div class="right flex items-center justify-center" lay-click="account">
                    <div class="text flex items-center">请选择提现账户</div>
                    <i class="layui-icon layui-icon-right"></i>
                </div>
                <input type="hidden" name="account" placeholder="请选择提现账户" class="account" lay-verify="req"/>
            </div>
        </div>
        <div class="middle m-30 p-30">
            <div class="type type2 flex items-center justify-between ">
                <div class="left ">提现方式</div>
                <div class="right flex flex-col"
                     data-key="mode"
                     data-h="50"
                     data-url="{:url('draw/mode')}"
                     lay-event="openFrame">
                    <div class="flex items-center justify-end">
                        <div class="text flex mode-text items-center">请选择提现方式</div>
                        <i class="layui-icon layui-icon-right"></i>
                    </div>
                    <div class="show"></div>
                </div>
                <input type="hidden" name="mode" class="mode" lay-verify="req" placeholder="请选择提现方式"/>
            </div>
        </div>
        <div class="btn theme-btn radius-14" data-password lay-event="formSubmit">申请提现</div>
        <div class="content mx-30">
            {:htmlspecialchars_decode(cache('system')['draw_msg'])}
        </div>
    </form>
</div>
</body>
{include file="public/footer"/}
<script>
    layui.extend({picker: "{/}/static/index/js/core/picker"}).use(['picker', 'methods', 'listen'], function (d) {
        var a = layui.jquery, picker = layui.picker, m = layui.methods, l = layui.listen, ly = layui.layer;
        m.event.click(['account', 'all'], function (data, that) {
            picker.render(JSON.parse('<?php echo json_encode($account);?>'), function (d) {
                that.children('.text').html(d.title).css('color', 'var(--dcl)');
                a('.account').val(d.type);
            });
        }, function () {
            var account = a('.account').val();
            account ? a('.money').val(a('.' + account + '-balance').text()) : ly.msg('请选择提现账户');
        });
        layui.drawModeCallback = function (data) {
            a('.mode-text').html(' <img src="' + data.icon + '" alt="" class="icon" style="width: .4rem;height: .4rem;margin-top: -.05rem">' +
                '<span style="color: var(--dcl);margin-left: .1rem">' + data.val + '</span>');
            a('.show').html(data.text).show()
            a('.mode').val(data.val)
            ly.closeLast('iframe');
        }
    });
</script>
</html>